const isAxurePage = document.querySelector('script[src$="axure/axQuery.js"]');

let app = null;

function closePlugin() {
  if (app) {
    // app.unmout不会触发组件的beforeDestroy
    window.clearEvent();
    app.unmount();
    const body = document.body;
    const container = body.querySelector("#app-container");
    body.removeChild(container);
    console.warn(`${location.href} 页面，axure拾取器已卸载!`);
  }
}

function openPlugin() {
  if (!(isAxurePage && !window.frames[0])) {
    console.warn(
      `${location.href} ${document.title} ，不需要注入axure 字段选择器!`
    );
    return;
  }
  console.warn(`${location.href} ${document.title} 注入axure 字段选择器`);
  const body = document.body;
  const container = document.createElement("div");
  container.id = "app-container-wrapper";
  body.append(container);

  setTimeout(() => {
    const { createApp } = Vue;
    const {
      createElementVNode: _createElementVNode,
      openBlock: _openBlock,
      createElementBlock: _createElementBlock,
      resolveComponent: _resolveComponent,
      createVNode: _createVNode,
      toDisplayString: _toDisplayString,
      createTextVNode: _createTextVNode,
      renderList: _renderList,
      Fragment: _Fragment,
      normalizeClass: _normalizeClass,
      withCtx: _withCtx,
      withModifiers: _withModifiers,
      mergeProps: _mergeProps,
      createBlock: _createBlock,
      createCommentVNode: _createCommentVNode,
    } = Vue;

    app = createApp({
      render(_ctx, _cache, $props, $setup, $data, $options) {
        const _component_a_switch = _resolveComponent("a-switch");
        const _component_a_input_number = _resolveComponent("a-input-number");
        const _component_a_checkbox = _resolveComponent("a-checkbox");
        const _component_a_tag = _resolveComponent("a-tag");
        const _component_a_tooltip = _resolveComponent("a-tooltip");
        const _component_a_col = _resolveComponent("a-col");
        const _component_draggable = _resolveComponent("draggable");
        const _component_a_tab_pane = _resolveComponent("a-tab-pane");
        const _component_a_tabs = _resolveComponent("a-tabs");
        const _component_a_button = _resolveComponent("a-button");

        return (
          _openBlock(),
          _createElementBlock(
            "div",
            {
              id: "app-container",
              class: _normalizeClass({ fold: !_ctx.selectState }),
            },
            [
              _createElementVNode(
                "div",
                {
                  class: "app-title",
                  ref: "appTitle",
                },
                [
                  _createElementVNode("div", { class: "left" }, [
                    _createElementVNode("span", { class: "logo" }, [
                      (_openBlock(),
                      _createElementBlock(
                        "svg",
                        {
                          width: "20px",
                          height: "20px",
                          viewBox: "0 0 20 20",
                          version: "1.1",
                          xmlns: "http://www.w3.org/2000/svg",
                          "xmlns:xlink": "http://www.w3.org/1999/xlink",
                        },
                        [
                          _createElementVNode("title", null, "编组备份 3"),
                          _createElementVNode("defs", null, [
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "50%",
                                y1: "-1.994932e-14%",
                                x2: "110.402109%",
                                y2: "66.3383697%",
                                id: "linearGradient-1",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#1437FB",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#709EFF",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode("path", {
                              d: "M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M10,3.49514563 C6.40746813,3.49514563 3.49514563,6.40746813 3.49514563,10 C3.49514563,13.5925319 6.40746813,16.5048544 10,16.5048544 C13.5925319,16.5048544 16.5048544,13.5925319 16.5048544,10 C16.5048544,6.40746813 13.5925319,3.49514563 10,3.49514563 Z",
                              id: "path-2",
                            }),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "55.1862604%",
                                y1: "14.8242503%",
                                x2: "82.9873066%",
                                y2: "81.1875835%",
                                id: "linearGradient-4",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#709EFF",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#1E42FB",
                                  offset: "78.6170053%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#254AFC",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "72.8362955%",
                                y1: "22.2425285%",
                                x2: "22.1182308%",
                                y2: "98.2620582%",
                                id: "linearGradient-5",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  offset: "33.8037998%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0.797366696",
                                  offset: "50.7655868%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "88.8846416%",
                                y1: "58.7680795%",
                                x2: "35.3323426%",
                                y2: "48.0467909%",
                                id: "linearGradient-6",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#1437FB",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#709EFF",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "88.9719506%",
                                y1: "63.7612455%",
                                x2: "-9.91635166%",
                                y2: "40.6792973%",
                                id: "linearGradient-7",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  offset: "33.8037998%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0.797366696",
                                  offset: "50.7655868%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "66.8819398%",
                                y1: "100%",
                                x2: "50%",
                                y2: "-10.4590744%",
                                id: "linearGradient-8",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#1437FB",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#709EFF",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "78.0491457%",
                                y1: "84.7138107%",
                                x2: "19.7254924%",
                                y2: "9.68385313%",
                                id: "linearGradient-9",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  offset: "33.8037998%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0.797366696",
                                  offset: "59.0845371%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#FFFFFF",
                                  "stop-opacity": "0",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode("path", {
                              d: "M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z",
                              id: "path-10",
                            }),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "88.1359941%",
                                y1: "100%",
                                x2: "26.2404441%",
                                y2: "21.8395848%",
                                id: "linearGradient-12",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#1437FB",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#709EFF",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "88.7256134%",
                                y1: "87.7627024%",
                                x2: "25.8730984%",
                                y2: "28.7317324%",
                                id: "linearGradient-13",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#1437FB",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#709EFF",
                                  offset: "100%",
                                }),
                              ]
                            ),
                            _createElementVNode("polygon", {
                              id: "path-14",
                              points:
                                "0 3.16911433 4.54230033 3.16911433 4.54230033 9.63437306 7.45869248 6.85369888 7.45869248 3.16911433 10.868814 3.16911433 13.4352407 3.90267475e-15 2.53179862 -3.36206894e-14",
                            }),
                            _createElementVNode(
                              "linearGradient",
                              {
                                x1: "-1.11022302e-14%",
                                y1: "50%",
                                x2: "100%",
                                y2: "50%",
                                id: "linearGradient-16",
                              },
                              [
                                _createElementVNode("stop", {
                                  "stop-color": "#00B99F",
                                  offset: "0%",
                                }),
                                _createElementVNode("stop", {
                                  "stop-color": "#0ADAB1",
                                  offset: "100%",
                                }),
                              ]
                            ),
                          ]),
                          _createElementVNode(
                            "g",
                            {
                              id: "页面-1",
                              stroke: "none",
                              "stroke-width": "1",
                              fill: "none",
                              "fill-rule": "evenodd",
                            },
                            [
                              _createElementVNode("g", { id: "编组备份-3" }, [
                                _createElementVNode("g", { id: "路径-7" }, [
                                  _createElementVNode(
                                    "mask",
                                    {
                                      id: "mask-3",
                                      fill: "white",
                                    },
                                    [
                                      _createElementVNode("use", {
                                        "xlink:href": "#path-2",
                                      }),
                                    ]
                                  ),
                                  _createElementVNode("use", {
                                    id: "蒙版",
                                    fill: "url(#linearGradient-1)",
                                    "xlink:href": "#path-2",
                                  }),
                                  _createElementVNode("path", {
                                    d: "M3.49514563,8.78640777 C3.49514563,4.60237154 5.66343042,1.67356895 10,-4.4408921e-15 C14.3365696,-1.67356895 9.94174841,-2.38492362 -3.18446351,-2.13406402 L-0.661380943,18.0146951 L11.8938364,18.0146951 L13.8908156,14.8426888 C9.23857562,14.4413854 6.91245564,14.2407337 6.91245564,14.2407337 C6.91245564,14.2407337 5.7733523,12.4226251 3.49514563,8.78640777 Z",
                                    id: "路径-9",
                                    fill: "url(#linearGradient-4)",
                                    mask: "url(#mask-3)",
                                  }),
                                  _createElementVNode("path", {
                                    d: "M3.49514563,8.78640777 C3.49514563,4.60237154 5.66343042,1.67356895 10,-6.04717222e-15",
                                    id: "路径",
                                    stroke: "url(#linearGradient-5)",
                                    "stroke-width": "0.5",
                                    mask: "url(#mask-3)",
                                  }),
                                  _createElementVNode("path", {
                                    d: "M13.2458687,15.3190618 C9.28065115,18.6480959 2.54992775,17.4280822 4.79616347e-14,10 C-1.69995183,5.04794523 -3.00304864,9.70813941 -3.90929044,23.9805825 L14.3800888,20.6966259 C16.2674204,14.8922271 15.889347,13.0997057 13.2458687,15.3190618 Z",
                                    fill: "url(#linearGradient-6)",
                                    mask: "url(#mask-3)",
                                  }),
                                  _createElementVNode("path", {
                                    d: "M13.178536,15.412574 C9.21331846,18.7416081 2.48259506,17.5215944 -0.0673326886,10.0935122",
                                    id: "路径",
                                    stroke: "url(#linearGradient-7)",
                                    "stroke-width": "0.5",
                                    mask: "url(#mask-3)",
                                  }),
                                  _createElementVNode("path", {
                                    d: "M20,12.1159864 C20,10.6082608 18.2038106,5.00952726 13.1631937,4.21445544 C9.80278237,3.68440756 10.4357944,7.08124111 15.0622298,14.4049561 L19.3644932,13.7440001 C19.7881644,13.663808 20,13.1211367 20,12.1159864 Z",
                                    id: "路径-10",
                                    fill: "url(#linearGradient-8)",
                                    mask: "url(#mask-3)",
                                  }),
                                  _createElementVNode("path", {
                                    d: "M20,12.1159864 C20,10.6082608 18.2038106,5.00952726 13.1631937,4.21445544",
                                    id: "路径",
                                    stroke: "url(#linearGradient-9)",
                                    "stroke-width": "0.5",
                                    mask: "url(#mask-3)",
                                  }),
                                ]),
                                _createElementVNode("g", { id: "路径" }, [
                                  _createElementVNode(
                                    "mask",
                                    {
                                      id: "mask-11",
                                      fill: "white",
                                    },
                                    [
                                      _createElementVNode("use", {
                                        "xlink:href": "#path-10",
                                      }),
                                    ]
                                  ),
                                  _createElementVNode("g", { id: "蒙版" }),
                                  _createElementVNode("path", {
                                    d: "M13.1069661,19.5079352 C13.4721476,20.7494236 13.5267782,21.3806827 13.2708581,21.4017127 C10.0929254,21.6628556 8.05080469,21.0558142 10,21.0558142 C12.5938771,20.3519381 13.6294758,17.7022654 13.1067961,13.1067961 C18.583481,13.4897888 21.5111591,11.8833231 21.8898304,8.2873991 C21.9185856,8.01433502 22.5120468,10.3696493 22.2877938,11.9649993 C22.2564771,12.1877886 21.3298575,12.5684442 19.5079352,13.1069661 C18.5204762,16.1307376 16.1307376,18.5204762 13.1069661,19.5079352 Z",
                                    stroke: "#FFFFFF",
                                    "stroke-width": "1.77535638",
                                    fill: "url(#linearGradient-12)",
                                    mask: "url(#mask-11)",
                                  }),
                                  _createElementVNode("path", {
                                    d: "M13.1069661,19.5079352 C13.4721476,20.7494236 13.5267782,21.3806827 13.2708581,21.4017127 C10.0929254,21.6628556 8.82750372,20 10.776699,20 C12.8478964,20 13.6245955,17.7022654 13.1067961,13.1067961 C17.7022654,13.6245955 20,12.8478964 20,10.776699 C20,10.5022463 22.5120468,10.3696493 22.2877938,11.9649993 C22.2564771,12.1877886 21.3298575,12.5684442 19.5079352,13.1069661 C18.5204762,16.1307376 16.1307376,18.5204762 13.1069661,19.5079352 Z",
                                    id: "路径备份",
                                    fill: "url(#linearGradient-13)",
                                    mask: "url(#mask-11)",
                                  }),
                                ]),
                                _createElementVNode(
                                  "g",
                                  {
                                    id: "路径-8",
                                    transform: "translate(3.980583, 5.940921)",
                                  },
                                  [
                                    _createElementVNode(
                                      "mask",
                                      {
                                        id: "mask-15",
                                        fill: "white",
                                      },
                                      [
                                        _createElementVNode("use", {
                                          "xlink:href": "#path-14",
                                        }),
                                      ]
                                    ),
                                    _createElementVNode("use", {
                                      id: "蒙版",
                                      fill: "#0ADAB1",
                                      "xlink:href": "#path-14",
                                    }),
                                    _createElementVNode("path", {
                                      d: "M7.45869248,3.16911433 C7.2465023,1.05637144 8.30633744,2.33146835e-15 10.6381979,2.10942375e-15 C12.9700583,1.88737914e-15 14.2362642,-0.329387969 14.4368154,-0.988163906 L13.0097087,4.10835558 L7.45869248,3.16911433 Z",
                                      fill: "url(#linearGradient-16)",
                                      "fill-rule": "nonzero",
                                      mask: "url(#mask-15)",
                                    }),
                                  ]
                                ),
                              ]),
                            ]
                          ),
                        ]
                      )),
                    ]),
                    _createElementVNode("h3", null, "字段拾取器"),
                  ]),
                  _createElementVNode("div", { class: "right" }, [
                    _createVNode(
                      _component_a_switch,
                      {
                        "checked-children": "开启",
                        "un-checked-children": "关闭",
                        checked: _ctx.selectState,
                        "onUpdate:checked": ($event) =>
                          (_ctx.selectState = $event),
                      },
                      null,
                      8 /* PROPS */,
                      ["checked", "onUpdate:checked"]
                    ),
                  ]),
                ],
                512 /* NEED_PATCH */
              ),
              _ctx.selectState
                ? (_openBlock(),
                  _createElementBlock(
                    "div",
                    {
                      key: 0,
                      class: "app-content",
                    },
                    [
                      _createElementVNode("div", { class: "app-operate" }, [
                        _createElementVNode("div", { class: "left" }, [
                          _createTextVNode(" 显示 "),
                          _createVNode(
                            _component_a_input_number,
                            {
                              size: "small",
                              style: { width: "50px" },
                              min: 1,
                              precision: 0,
                              value: _ctx.colNum,
                              "onUpdate:value": ($event) =>
                                (_ctx.colNum = $event),
                            },
                            null,
                            8 /* PROPS */,
                            ["value", "onUpdate:value"]
                          ),
                          _createTextVNode(" 列，共 "),
                          _createElementVNode(
                            "span",
                            { style: { "font-weight": "700" } },
                            _toDisplayString(_ctx.selectedList.length),
                            1 /* TEXT */
                          ),
                          _createTextVNode(" 项 "),
                        ]),
                        _createElementVNode(
                          "div",
                          {
                            class: "clear-wrapper",
                            onClick: _ctx.clearSelectList,
                          },
                          [
                            _createElementVNode(
                              "span",
                              { class: "clear-icon" },
                              [
                                (_openBlock(),
                                _createElementBlock(
                                  "svg",
                                  {
                                    xmlns: "http://www.w3.org/2000/svg",
                                    "xmlns:xlink":
                                      "http://www.w3.org/1999/xlink",
                                    width: "14px",
                                    height: "14px",
                                    viewBox: "0 0 14 14",
                                    version: "1.1",
                                  },
                                  [
                                    _createElementVNode("title", null, "清空"),
                                    _createElementVNode(
                                      "g",
                                      {
                                        id: "页面-1",
                                        stroke: "none",
                                        "stroke-width": "1",
                                        fill: "none",
                                        "fill-rule": "evenodd",
                                      },
                                      [
                                        _createElementVNode(
                                          "g",
                                          {
                                            id: "画板",
                                            transform:
                                              "translate(-356.000000, -110.000000)",
                                            fill: "#303032",
                                            "fill-rule": "nonzero",
                                          },
                                          [
                                            _createElementVNode(
                                              "g",
                                              {
                                                id: "编组-2",
                                                transform:
                                                  "translate(48.000000, 48.000000)",
                                              },
                                              [
                                                _createElementVNode(
                                                  "g",
                                                  {
                                                    id: "编组",
                                                    transform:
                                                      "translate(16.000000, 57.000000)",
                                                  },
                                                  [
                                                    _createElementVNode(
                                                      "g",
                                                      {
                                                        id: "5.Button/2次要按钮/小",
                                                        transform:
                                                          "translate(284.000000, 0.000000)",
                                                      },
                                                      [
                                                        _createElementVNode(
                                                          "g",
                                                          {
                                                            id: "清空",
                                                            transform:
                                                              "translate(8.000000, 5.000000)",
                                                          },
                                                          [
                                                            _createElementVNode(
                                                              "path",
                                                              {
                                                                d: "M4.52599999,1.12516073 L9.47400001,1.12516073 L9.47400001,0 L4.52599999,0 L4.52599999,1.12516073 L4.52599999,1.12516073 Z M4.55399999,9.11130162 L5.707,9.11130162 L5.707,6.41491642 L4.55399999,6.41491642 L4.55399999,9.11130162 L4.55399999,9.11130162 Z M8.29199999,9.11130162 L9.44600001,9.11130162 L9.44600001,6.41491642 L8.29199999,6.41491642 L8.29199999,9.11130162 Z M11.349,3.40248607 L2.64999999,3.40248607 L2.64999999,11.4186312 C2.64999999,12.221746 3.37799999,12.8758394 4.272,12.8758394 L9.72600001,12.8758394 C10.62,12.8758394 11.348,12.221746 11.348,11.4186312 L11.348,3.40248607 L11.349,3.40248607 Z M12.503,3.40248607 L12.503,11.4186312 C12.503,12.8418346 11.257,14 9.72699999,14 L4.27300001,14 C2.74300001,14 1.49700001,12.8418345 1.497,11.4186312 L1.497,3.40248607 L0,3.40248607 L0,2.27832548 L14,2.27832548 L14,3.40248607 L12.503,3.40248607 L12.503,3.40248607 Z",
                                                                id: "形状",
                                                              }
                                                            ),
                                                          ]
                                                        ),
                                                      ]
                                                    ),
                                                  ]
                                                ),
                                              ]
                                            ),
                                          ]
                                        ),
                                      ]
                                    ),
                                  ]
                                )),
                              ]
                            ),
                            _createTextVNode(" 清空列表 "),
                          ],
                          8 /* PROPS */,
                          ["onClick"]
                        ),
                      ]),
                      _createElementVNode(
                        "div",
                        { class: "field-list-wrapper" },
                        [
                          _createVNode(
                            _component_a_tabs,
                            {
                              activeKey: _ctx.activeKey,
                              "onUpdate:activeKey": ($event) =>
                                (_ctx.activeKey = $event),
                              type: "editable-card",
                              onEdit: _ctx._handleEdit,
                            },
                            {
                              default: _withCtx(
                                () => [
                                  (_openBlock(true),
                                  _createElementBlock(
                                    _Fragment,
                                    null,
                                    _renderList(_ctx.panes, (pane) => {
                                      return (
                                        _openBlock(),
                                        _createBlock(
                                          _component_a_tab_pane,
                                          {
                                            key: pane.key,
                                            tab: pane.title,
                                            closable: pane.closable,
                                          },
                                          {
                                            default: _withCtx(
                                              () => [
                                                _createVNode(
                                                  _component_draggable,
                                                  {
                                                    class: "field-list",
                                                    tag: "a-row",
                                                    "item-key": "id",
                                                    group: "fields",
                                                    animation: 200,
                                                    ghostClass: "ghost",
                                                    "component-data": {
                                                      gutter: 10,
                                                    },
                                                    modelValue:
                                                      _ctx.selectedList,
                                                    "onUpdate:modelValue": (
                                                      $event
                                                    ) =>
                                                      (_ctx.selectedList =
                                                        $event),
                                                  },
                                                  {
                                                    item: _withCtx(
                                                      ({ element, index }) => [
                                                        _createVNode(
                                                          _component_a_col,
                                                          _mergeProps(
                                                            { ref_for: true },
                                                            _ctx.colConfig
                                                          ),
                                                          {
                                                            default: _withCtx(
                                                              () => [
                                                                _createElementVNode(
                                                                  "div",
                                                                  {
                                                                    class:
                                                                      "field-item",
                                                                  },
                                                                  [
                                                                    _createVNode(
                                                                      _component_a_tooltip,
                                                                      {
                                                                        placement:
                                                                          "top",
                                                                        title:
                                                                          element.title,
                                                                        mouseEnterDelay: 3,
                                                                      },
                                                                      {
                                                                        default:
                                                                          _withCtx(
                                                                            () => [
                                                                              _createVNode(
                                                                                _component_a_tag,
                                                                                {
                                                                                  color:
                                                                                    "#E1EAFF",
                                                                                  closable:
                                                                                    "",
                                                                                  onClose:
                                                                                    _withModifiers(
                                                                                      (
                                                                                        $event
                                                                                      ) =>
                                                                                        _ctx.removeItem(
                                                                                          index
                                                                                        ),
                                                                                      [
                                                                                        "stop",
                                                                                      ]
                                                                                    ),
                                                                                },
                                                                                {
                                                                                  default:
                                                                                    _withCtx(
                                                                                      () => [
                                                                                        _createVNode(
                                                                                          _component_a_checkbox,
                                                                                          {
                                                                                            style:
                                                                                              {
                                                                                                width:
                                                                                                  "100%",
                                                                                              },
                                                                                            checked:
                                                                                              element.isQuery,
                                                                                            onChange:
                                                                                              (
                                                                                                e
                                                                                              ) =>
                                                                                                (element.isQuery =
                                                                                                  e.target.checked),
                                                                                          },
                                                                                          {
                                                                                            default:
                                                                                              _withCtx(
                                                                                                () => [
                                                                                                  _createElementVNode(
                                                                                                    "span",
                                                                                                    {
                                                                                                      class:
                                                                                                        _normalizeClass(
                                                                                                          [
                                                                                                            "field-text",
                                                                                                            {
                                                                                                              required:
                                                                                                                element.required,
                                                                                                            },
                                                                                                          ]
                                                                                                        ),
                                                                                                    },
                                                                                                    _toDisplayString(
                                                                                                      element.title
                                                                                                    ),
                                                                                                    3 /* TEXT, CLASS */
                                                                                                  ),
                                                                                                ],
                                                                                                undefined,
                                                                                                true
                                                                                              ),
                                                                                            _: 2 /* DYNAMIC */,
                                                                                          },
                                                                                          1032 /* PROPS, DYNAMIC_SLOTS */,
                                                                                          [
                                                                                            "checked",
                                                                                            "onChange",
                                                                                          ]
                                                                                        ),
                                                                                      ],
                                                                                      undefined,
                                                                                      true
                                                                                    ),
                                                                                  _: 2 /* DYNAMIC */,
                                                                                },
                                                                                1032 /* PROPS, DYNAMIC_SLOTS */,
                                                                                [
                                                                                  "onClose",
                                                                                ]
                                                                              ),
                                                                            ],
                                                                            undefined,
                                                                            true
                                                                          ),
                                                                        _: 2 /* DYNAMIC */,
                                                                      },
                                                                      1032 /* PROPS, DYNAMIC_SLOTS */,
                                                                      ["title"]
                                                                    ),
                                                                  ]
                                                                ),
                                                              ],
                                                              undefined,
                                                              true
                                                            ),
                                                            _: 2 /* DYNAMIC */,
                                                          },
                                                          1040 /* FULL_PROPS, DYNAMIC_SLOTS */
                                                        ),
                                                      ]
                                                    ),
                                                    _: 1 /* STABLE */,
                                                  },
                                                  8 /* PROPS */,
                                                  [
                                                    "modelValue",
                                                    "onUpdate:modelValue",
                                                  ]
                                                ),
                                              ],
                                              undefined,
                                              true
                                            ),
                                            _: 1 /* STABLE */,
                                          },
                                          8 /* PROPS */,
                                          ["tab", "closable"]
                                        )
                                      );
                                    }),
                                    128 /* KEYED_FRAGMENT */
                                  )),
                                ],
                                undefined,
                                true
                              ),
                              _: 1 /* STABLE */,
                            },
                            8 /* PROPS */,
                            ["activeKey", "onUpdate:activeKey", "onEdit"]
                          ),
                        ]
                      ),
                      _createElementVNode("div", { class: "app-footer" }, [
                        _createVNode(
                          _component_a_button,
                          {
                            type: "primary",
                            onClick: _ctx.genFormField,
                          },
                          {
                            default: _withCtx(
                              () => [_createTextVNode("生成Form")],
                              undefined,
                              true
                            ),
                            _: 1 /* STABLE */,
                          },
                          8 /* PROPS */,
                          ["onClick"]
                        ),
                        _createVNode(
                          _component_a_button,
                          {
                            type: "primary",
                            onClick: _ctx.genTableColumns,
                          },
                          {
                            default: _withCtx(
                              () => [_createTextVNode("生成Column")],
                              undefined,
                              true
                            ),
                            _: 1 /* STABLE */,
                          },
                          8 /* PROPS */,
                          ["onClick"]
                        ),
                      ]),
                    ]
                  ))
                : _createCommentVNode("v-if", true),
            ],
            2 /* CLASS */
          )
        );
      },
      data() {
        return {
          colNum: 3,
          idReg: /^u((\d)+)$/,
          selectState: localStorage.getItem("selectState") === "true",
          selectSubForm: false,
          activeKey: "default",
          selectedList: [],
          selctedObj: {
            default: {
              label: "全局",
              fieldList: [],
            },
          },
        };
      },
      computed: {
        colConfig() {
          return {
            span: 24 / this.colNum,
          };
        },
        selectedMap() {
          return this.selectedList.reduce((obj, item) => {
            obj[item.id] = item;
            return obj;
          }, {});
        },
        panes() {
          return Object.keys(this.selctedObj).map((key) => ({
            key,
            title: this.selctedObj[key].label,
            closable: key !== "default",
          }));
        },
      },
      watch: {
        selectState(nval) {
          localStorage.setItem("selectState", nval);
          if (nval) {
            this._bindClickEvent();
          } else {
            this._unBindClickEvent();
          }
        },
        activeKey(nval, oval) {
          if (this.selctedObj[oval]) {
            this.selctedObj[oval].fieldList = [...this.selectedList];
          }
          this.selectedList = [...(this.selctedObj[nval].fieldList || [])];
          console.log("🚀 ~ selectedList:", this.selectedList);
        },
      },
      methods: {
        async _sendData(data) {
          const url = "http://127.0.0.1:4000/axure/receiveData";
          const options = {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data),
          };
          const res = await fetch(url, options);
          const resData = await res.json();
          return resData;
        },
        _bindClickEvent() {
          if (this.selectState) {
            document.addEventListener("click", this.handleDomClick);
          }
        },
        _unBindClickEvent() {
          this.clearSelectList();
          document.removeEventListener("click", this.handleDomClick);
        },
        _bindDragContainerEvent() {
          const dragTarget = this.$refs.appTitle;
          const moveElem = dragTarget.parentNode;

          var dragging; //是否激活拖拽状态
          var tLeft, tTop; //鼠标按下时相对于选中元素的位移

          //监听鼠标按下事件
          const mouseDownFn = (e) => {
            if (e.target == dragTarget) {
              dragTarget.style.cursor = "move";
              dragging = true; //激活拖拽状态
              var moveElemRect = moveElem.getBoundingClientRect();
              tLeft = e.clientX - moveElemRect.left; //鼠标按下时和选中元素的坐标偏移:x坐标
              tTop = e.clientY - moveElemRect.top; // 移除了+65，改为完全基于视口定位
            }
          };
          document.addEventListener("mousedown", mouseDownFn);
          //监听鼠标放开事件
          const mouseupFn = (e) => {
            dragging = false;
          };
          document.addEventListener("mouseup", mouseupFn);
          //监听鼠标移动事件
          const mousemoveFn = (e) => {
            if (dragging) {
              dragTarget.style.cursor = "move";
              var moveX = e.clientX - tLeft,
                moveY = e.clientY - tTop;

              moveElem.style.left = moveX + "px";
              moveElem.style.top = moveY + "px";
            }
          };
          document.addEventListener("mousemove", mousemoveFn);
          return () => {
            document.removeEventListener("mousedown", mouseDownFn);
            document.removeEventListener("mouseup", mouseupFn);
            document.removeEventListener("mousemove", mousemoveFn);
          };
        },
        _bindEvent() {
          this.handleDomClick = this._handleDomClick.bind(this);
          this._bindClickEvent();
          const unBindDragEvent = this._bindDragContainerEvent();
          return () => {
            this._unBindClickEvent();
            unBindDragEvent();
          };
        },
        _findUIdParent(node) {
          let resultNode = null;
          let currentNode = node;
          let count = 0;
          while (count++ < 5) {
            const { id } = currentNode;
            if (this.idReg.test(id)) {
              resultNode = currentNode;
              break;
            } else {
              currentNode = currentNode.parentNode;
            }
          }
          return resultNode;
        },
        _getNodeNumberId(node) {
          const { id } = node;
          const numberId = id.match(/^u((\d)+)/)[1];
          return numberId;
        },
        _handleDomClick(event) {
          const redBoxDom = this._findUIdParent(event.target);
          if (!redBoxDom) return;
          const { id } = redBoxDom;
          if (this.selectedMap[id]) {
            const index = this.selectedList.findIndex((item) => item.id === id);
            return this.removeItem(index);
          }
          const { ctrlKey, metaKey } = event;
          if (!ctrlKey && !metaKey) {
            if (this.selectSubForm) {
              return this.addTabItem(redBoxDom);
            } else {
              return this.addItem(redBoxDom);
            }
          }
          // 多选操作
          const startNode = this.selectedList[this.selectedList.length - 1];
          if (!startNode) {
            return this.addItem(redBoxDom);
          }
          const startId = Number.parseInt(this._getNodeNumberId(startNode.dom));
          const endId = Number.parseInt(this._getNodeNumberId(redBoxDom));
          for (let index = startId + 1; index <= endId; index++) {
            const redBoxDom = document.querySelector(`#u${index}`);
            if (redBoxDom) {
              this.addItem(redBoxDom);
            }
          }
        },
        _handleEdit(event, type) {
          console.log(event, type);
          if (type === "add") {
            this.selectSubForm = true;
            this.$message.info("请选择字段");
          } else {
            delete this.selctedObj[this.activeKey];
            const keys = Object.keys(this.selctedObj);
            if (keys.length > 1) {
              this.activeKey = keys.find((item) => item !== "default");
            } else {
              this.activeKey = "default";
            }
          }
        },
        addTabItem(redBoxDom) {
          this.selectSubForm = false;
          const { id } = redBoxDom;
          const textDom = redBoxDom.querySelector(`#${id}_text`);
          if (!textDom) return;
          const spanTexts = textDom.innerText
            .replaceAll(/\s+/g, "")
            .replaceAll(":", "")
            .replaceAll("：", "");
          if (spanTexts) {
            this.selctedObj[id] = {
              label: spanTexts.replaceAll("*", ""),
              fieldList: [],
            };
            this.activeKey = id;
            this.$message.success("添加tab成功");
          }
        },
        addItem(redBoxDom) {
          const { id } = redBoxDom;
          const textDom = redBoxDom.querySelector(`#${id}_text`);
          if (!textDom) return;
          const spanTexts = textDom.innerText
            .replaceAll(/\s+/g, "")
            .replaceAll(":", "")
            .replaceAll("：", "");
          if (spanTexts) {
            redBoxDom.classList.add("red-box");
            const field = {
              id,
              dom: redBoxDom,
              title: spanTexts.replaceAll("*", ""),
              isQuery: false,
            };
            if (spanTexts.includes("*")) {
              field.required = true;
            }
            this.selectedList.push(field);
            this.selctedObj[this.activeKey].fieldList = [...this.selectedList];
          }
        },
        removeItem(index) {
          const obj = this.selectedList[index];
          obj.dom.classList.remove("red-box");
          obj.dom = null;
          this.selectedList.splice(index, 1);
          this.selctedObj[this.activeKey].fieldList = [...this.selectedList];
        },
        clearSelectList() {
          for (let obj of this.selectedList) {
            obj.dom.classList.remove("red-box");
            obj.dom = null;
          }
          this.selectedList = [];
          this.selctedObj[this.activeKey].fieldList = [...this.selectedList];
        },
        async genFormField() {
          const formObj = JSON.parse(JSON.stringify({ ...this.selctedObj }));
          for (const subFormKey of Object.keys(formObj)) {
            formObj[subFormKey].fieldList = formObj[subFormKey].fieldList.map(
              (item) => {
                return {
                  label: item.title,
                  formKey: "formKey_" + item.id,
                  required: item.required,
                };
              }
            );
          }
          try {
            const data = await this._sendData({
              type: "form",
              config: {
                colNum: this.colNum,
              },
              formObj,
            });
            this.$message.success("生成成功");
          } catch (e) {
            console.error("genFormField error", e);
          }
        },
        async genTableColumns() {
          const colList = this.selectedList.map((item) => {
            return {
              title: item.title,
              isQuery: item.isQuery,
              dataIndex: "col_" + item.id,
            };
          });
          try {
            const data = await this._sendData({
              type: "table",
              list: colList,
            });
            this.$message.success("生成成功");
          } catch (e) {
            console.error("genTableColumns error", e);
          }
        },
      },
      mounted() {
        this.clearEvent = this._bindEvent();
        window.clearEvent = this.clearEvent;
      },
      beforeDestroy() {
        this.clearEvent();
      },
    });
    app.use(antd);
    app.component("draggable", vuedraggable);
    app.mount("#app-container-wrapper");
  });
}

(async function () {
  const stateInfo = await chrome.storage.local.get("selectState");
  // 存在axure脚本且没有iframe
  chrome.runtime.onMessage.addListener(function (
    request,
    sender,
    sendResponse
  ) {
    const { message, data } = request;
    if (message === "tooglePluginStatus") {
      if (data.pluginState) {
        openPlugin();
      } else {
        closePlugin();
      }
    }
  });
  stateInfo.selectState && openPlugin();
})();
